<template>
	<view>
		<custom-nav-sq-xcx :isBack="true" currBg="usuallyBg" :needConBlock="true">
			<block slot="content">咨询师评价</block>
		</custom-nav-sq-xcx>
		<view class="sqConBlock"></view>
		<view class="sqConWrap noPadd">
			<view class="totalPj">
				<view class="pjScore">
					<view class="scoreItem">
						<view class="scoreNum">5</view>
						<view class="scoreTit">综合评分</view>
						<view class="lineView"></view>
					</view>
					<view class="scoreItem">
						<view class="scoreNum">2</view>
						<view class="scoreTit">条真实评价</view>
					</view>
				</view>
				<view class="infoWrap padd hasFlex">
					<view class="infoItem">
						<view class="infoCon">1</view>
						<view>好评次数</view>
						<view class="lineView"></view>
					</view>
					<view class="infoItem">
						<view class="infoCon">0</view>
						<view>中评次数</view>
						<view class="lineView"></view>
					</view>
					<view class="infoItem">
						<view class="infoCon">1</view>
						<view>差评次数</view>
					</view> 
				</view>
			</view>
			<view class="listWrap">
				<pj-list></pj-list>
			</view>
		</view>
	</view>
</template>

<script>
	import PjList from './components/PjList.vue'
	export default {
		components:{
			PjList
		}
	}
</script>

<style lang="scss" scoped>
	.totalPj{
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx 0;
	}
	.infoWrap{
		margin-top: 10rpx;
		.infoItem{
			width: 33.3%;
			padding: 10rpx 0;
			position: relative;
			font-size:26rpx;
			color:$sq-maina;
			text-align: center;
			.infoCon{
				color: $sq-main0;
				font-size:36rpx;
				margin-bottom: 5rpx;
			}
			.lineView{
				width: 1rpx;
				height: 30%;
				background: #eee;
				position: absolute;
				right: 0;
				top: 35%;
			}
		}
	}
	.pjScore{
		display: flex;
		margin-bottom: 10rpx;
		.scoreItem{
			width: 50%;
			position: relative;
			text-align: center;
			padding: 10rpx 0;
			.scoreNum{
				font-size: 60rpx;
				font-weight: bold;
				color: $sq-main0;
			}
			.scoreTit{
				font-size: 24rpx;
				color:$sq-main8;
			}
			.lineView{
				width: 1rpx;
				height: 36%;
				position: absolute;
				right: 0;
				top: 32%;
				background: #eee;
			}
		}
	}
	.listWrap{
		background: #fff;
		padding: 20rpx 30rpx 0;
	}
</style>